<template>
<div class="payBox container_common1 flex_column">
    <header class="headers flex header_custom hei46 align_center relative" :style="{ paddingTop: safeTop+'px'}">
        <div class="left_icon absolute" :class="isNight=='night-theme'?'whiteIcons':'darkIcons'">
            <van-icon name="arrow-left" @click="back()" />
        </div>
        <div class="titleContent font1">
            <div class="items c222" @click="switchTab(1)" :class="{'cur':curType==1}">
                <span>购买</span>
                <i class="borders"></i>
            </div>
            <div class="items c222" @click="switchTab(2)" :class="{'cur':curType==2}">
                <span>出售</span>
                <i class="borders"></i>
            </div>
            <div class="items c222" @click="switchTab(3)" :class="{'cur':curType==3}">
                <span>成为商户</span>
                <i class="borders"></i>
            </div>
        </div>
        <div class="right_icon absolute pad_r_10" @click="openPoups">
            <img src="../../assets/images/home/mores1.png" alt srcset class="icons wid20 hei18" />
        </div>
        <mores @close="close1" v-if="isShowMore" type="otc" class="absolute right15 top46" :style="{ paddingTop: safeTop+'px'}"></mores>
    </header>
    <div class="subTabList bg_exit_btn bor_b" v-if="curType!=3">
        <span class="size15 bold" v-for="(item,i) in tabList" :key="i" :class="{'blue_text':subTabType==i}" @click="switchSubTab(i)">SQT</span>
    </div>
    <!-- <div class="sections flex1"> -->
    <mescroll-vue class="sections flex1" ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
        <div v-if="curType==1">
            <div class="operationBox pad_t_b_15 font1">
                <div class="flex-between align_center size12 c999">
                    <p class="size18 c222 font1">一键买币</p>
                    <span>参考价格</span>
                </div>
                <div class="flex flex_end align_center size12 c999 mar_t_6">
                    <span>{{nowPrice|SubString(2)}} CNY/SQT</span>
                </div>
                <div class="inputBox flex align_center c222" id="inputBox">
                    <div class="inputs">
                        <van-field v-model="price" placeholder="购买金额" type="number" class="flex1 size12" @focus="focusIndex=1" />
                        <span>CNY</span>
                    </div>
                    <div @click="getNumber" class="pad_t_b_10 pad_l_r_10">
                        <img src="../../assets/images/home/transIcon.png" alt srcset class="wid16 hei12" />
                    </div>
                    <div class="inputs">
                        <van-field v-model="number" placeholder="购买数量" type="number" class="flex1 size12" @focus="focusIndex=2" />
                        <span>SQT</span>
                    </div>
                </div>
                <div class="bottoms size12 c999 flex-between align_center mar_t_10">
                    <div class="leftBox flex align_center">
                        <span class="items" @click="switchPayType('ALIAY')" :class="{'cur':payType=='ALIAY'}">支付宝</span>
                        <span class="items" @click="switchPayType('BANKCARD')" :class="{'cur':payType=='BANKCARD'}">银行卡</span>
                        <span class="items" @click="switchPayType('WECHAT')" :class="{'cur':payType=='WECHAT'}">微信</span>
                    </div>
                    <div class="rightBox">
                        <p class="c222 right_text">成交单价</p>
                        <span class="mar_t_5 block right_text" v-if="priceOrNum">{{priceOrNum|SubString(4)}}</span>
                        <span class="mar_t_5 block right_text" v-else>填写后获取</span>
                    </div>
                </div>
                <div class="mar_t_20 submit">
                    <van-button type="info" block @click="quickBuy">
                        <img src="../../assets/images/home/shandian.png" alt srcset class="wid15 hei22 mar_r_5" />一键购买
                    </van-button>
                </div>
            </div>
            <div class="darkLine"></div>
            <div class="orderTitle size15 c999 bor_b">自选交易</div>
        </div>
        <div v-if="curType==2">
            <div class="assetBox size12 flex-between align_center c999" @click="goTransfer">
                <div class="items">
                    <span>可用：</span>
                    <span class="c222 font1">{{fabiBalance.fbBalance|SubString(4)}} {{fabiBalance.currency}}</span>
                </div>
                <div class="items">
                    <span>冻结：</span>
                    <span class="c222 font1">{{fabiBalance.fbBlockedBalance|SubString(4)}} {{fabiBalance.currency}}</span>
                </div>
            </div>

            <!-- <div class="orderList pad_t_15">
        <div v-for="(item,i) in 5" :key="i">
          <otcItem :list="{}" type="sell" />
        </div>
        </div>-->
        </div>
        <div v-if="curType==3">
            <applyMer />
        </div>
        <div class="orderList flex1" v-if="curType!=3">
            <div v-if="orderList.length>0">
                <div v-for="(item,i) in orderList" :key="i">
                    <otcItem :list="item" :type="curType==1?'buy':'sell'" :noBorder="i+1==orderList.length" :nickName="nickName" :payType="item.payType" />
                </div>
            </div>
            <div v-else>
                <nodata :title="'暂无数据'" class="pad_t_50"></nodata>
            </div>
        </div>
    </mescroll-vue>
</div>
</template>

<script>
import $ from "jquery";
import {
    mapActions
} from "vuex";
import otcItem from "../../components/otcItem";
import mores from "../../components/mores"; //更多弹框
import applyMer from "../../components/applyMer"; //申请商户
export default {
    components: {
        otcItem,
        mores,
        applyMer
    },
    computed: {
        safeTop() {
            return this.$store.state.safeAreaTop;
        },
        isNight() {
            return this.$store.state.nowThemeInfo;
        },
        resetUserinfo() {
            return this.$store.state.resetUserinfo;
        }
    },
    watch: {
        resetUserinfo(val) {
            if (val) {
                this.getUserInfo();
                this.setResetUserinfo(0);
            }
        },
        price(val) {
            if (this.focusIndex == 1) {
                if (!parseFloat(val)) {
                    this.number = null;
                }
                this.number = null;
            }
        },
        number(val) {
            if (this.focusIndex == 2) {
                if (!parseFloat(val)) {
                    this.price = null;
                }
                this.price = null;
            }
        }
    },
    activated() {
        this.init();
        //商户信息
        this.$store.state.isLogin && this.getUserInfo();
        this.getTabList(); //获取币种列表

        // this.$hub.$on("setNickNames", res => {
        //   this.getUserInfo();
        // });
    },
    data() {
        return {
            curType: 1, //1购买，2出售，3成为商户
            subTabType: 0,
            number: null,
            operateType: 1, //1买2卖
            payType: "ALIAY", //支付方式
            tabList: [{
                currency: "USDT"
            }],
            isShowMore: false, //显示更多弹框

            storeState: "", //商户申请状态
            nickName: "", //用户昵称
            mescrollDown: {
                offset: 46,
                callback: this.downCallback,
                auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
            mescrollUp: {
                callback: this.upCallback,
                auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
                htmlNodata: '<p class="upwarp-nodata"></p>'
            },
            pageNum: 1, //当前页码
            pageSize: 10, //当前页数
            noMores: true, //没有更多数据了
            orderList: [], //订单列表
            isRenZheng: false,
            userInfo: {},
            fabiBalance: {
                fbBalance: 0,
                fbBlockedBalance: 0
            }, //账户
            nowPrice: 0, //当前币种价格
            price: null, //价格
            priceOrNum: 0, //匹配到的订单价格
            focusIndex: 0, //焦点获取到的input,1价格2数量
            // 禁止点击
            disableClick: false
        };
    },
    methods: {
        ...mapActions([
            "setnavTitle",
            "setnavBarState",
            "settabBarState",
            "setbackRouter",
            "setnavBarArrow",
            "setnavBarBgColor",
            "setCurrency",
            "setStatusBar",
            "setResetUserinfo"
        ]),
        init() {
            this.setnavTitle("");
            this.setbackRouter("");
            this.setnavBarState(false);
            this.settabBarState(false);
            this.setnavBarArrow(true);
            this.setCurrency("");
        }, // 初始化页面
        //获取当前价
        getPrice() {
            this.$post1("otc/order/getPrice", {
                currency: this.tabList[this.subTabType].currency
            }).then(res => {
                if (res && res.status == "SUCCEED" && res.result) {
                    this.nowPrice = res.result;
                    this.initPrice = res.result;
                }
            });
        },
        //输入
        getNumber() {
            // 暂未匹配到符合的广告
            if (!parseFloat(this.price) && !parseFloat(this.number)) {
                return;
            }
            if (this.price && this.number) {
                return;
            }
            if (this.focusIndex == 0) {
                return;
            }
            if (this.focusIndex == 1) {
                if (!this.price) {
                    return;
                }
                this.orderGetPrice(1);
            } else if (this.focusIndex == 2) {
                if (!this.number) {
                    return;
                }
                this.orderGetPrice(2);
            }
        },

        //一键购买匹配价格
        orderGetPrice(n) {
            var data = {
                userId: this.$store.state.userId,
                type: n == 1 ? "PRICE" : "NUM",
                price: n == 1 ? parseFloat(this.price) : parseFloat(this.number),
                direction: "BUY",
                currency: this.tabList[this.subTabType].currency,
                payType: this.payType
            };

            // this.$util.showLoading();
            this.$post1("otc/order/fastPlaceAnOrderGetPrice", data).then(res => {
                this.Toast.clear();
                if (res && res.status == "SUCCEED" && res.result) {
                    if (n == 1) {
                        this.number = res.result.priceOrNum || 0;
                    } else {
                        this.price = res.result.priceOrNum || 0;
                    }
                    this.priceOrNum = res.result.price;
                    this.focusIndex = 0;
                } else {
                    if (n == 1) {
                        this.number = null;
                    }
                    if (n == 2) {
                        this.price = null;
                    }
                    this.Toast(res.errorMessage);
                }
            });
        },
        //一键购买
        async quickBuy() {
            // 禁止多次点击
            if (this.disableClick) {
                return;
            }
            if (!this.$util.isLogin()) {
                return;
            } else {
                //商户信息
                this.getUserInfo();
            }
            let _this = this;
            // if (!this.$util.isRenZhengs(this, this.isRenzheng)) {
            //     return;
            // }
            if (!this.$util.isNickname(this, this.nickName)) {
                return;
            }

            if (!parseFloat(this.price)) {
                // this.Toast("请输入价格");
                if (!parseFloat(this.number)) {
                    this.Toast("请输入价格");
                    return;
                }
                let data = {
                    userId: this.$store.state.userId,
                    type: "NUM",
                    price: parseFloat(this.number),
                    direction: "BUY",
                    currency: this.tabList[this.subTabType].currency,
                    payType: this.payType
                };
                let res1 = await this.$post1(
                    "otc/order/fastPlaceAnOrderGetPrice",
                    data
                );

                if (res1 && res1.status == "SUCCEED" && res1.result) {
                    this.price = res1.result.priceOrNum || 0;
                    this.priceOrNum = res1.result.price;
                    this.focusIndex = 0;
                } else {
                    this.Toast(res1.errorMessage);
                    return;
                }
            }
            // 禁止重复点击
            this.disableClick = true;
            // console.log(this.price);
            let res = await this.$post1("otc/order/ownOrderList", {
                priceOrderStatus: "NONPAYMENT",
                userId: this.$store.state.userId,
                page: 1,
                size: 10
            });
            if (res.result && res.result.data && res.result.data.length > 0) {
                this.Dialog.confirm({
                        title: "",
                        message: "当前有未完成订单，去完成？"
                    }).then(() => {
                        _this.$router.push({
                            name: "otcOrder",
                            params: {
                                active: 1
                            }
                        });
                    })
                    .catch(() => {});
                return;
            }
            let data = {
                userId: this.$store.state.userId,
                price: parseFloat(this.price),
                direction: "BUY",
                currency: this.tabList[this.subTabType].currency,
                payType: this.payType
            };
            // this.$util.showLoading();
            this.$post1("otc/order/fastPlaceAnOrder", data).then(res => {
                this.Toast.clear();
                // 延迟启用点击
                setTimeout(() => {
                    this.disableClick = false;
                }, 300);
                if (res && res.status == "SUCCEED" && res.result) {

                    this.price = null;
                    this.number = null;
                    setTimeout(ret => {
                        this.$router.push({
                            // path: `/quotes/quotesDetail?id=${id}`
                            path: `/transactionDetail`,
                            query: {
                                type: "BUY",
                                orderPriceId: res.result.orderPriceId
                            }
                        });
                    }, 300);
                } else {
                    this.Toast(res.errorMessage);
                }
            }).catch(() => {
                // 延迟启用点击
                setTimeout(() => {
                    this.disableClick = false;
                }, 300);
            });
            // console.log(this.number);
        },
        mescrollInit(mescroll) {
            this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
        },
        //下拉刷新
        downCallback() {
            this.pageNum = 1;
            this.mescroll.resetUpScroll();
            this.getOrderList();
        },
        //上拉加载
        upCallback() {
            if (this.noMores) {
                return;
            }
            this.getOrderList(1);
        },
        getTabList() {
            this.$util.showLoading();
            this.$post("otc/order/currencyList", {}).then(res => {
                this.Toast.clear();
                if (res && res.status == "SUCCEED") {
                    this.tabList = res.result;
                    this.getOrderList(); //订单列表
                    this.$store.state.isLogin && this.getBalances();
                    this.getPrice(); //当前币种价格
                }
            });
        },
        getBalances() {
            let data = {
                member: this.$store.state.userId,
                currency: 'SQT'
            };
            let obj = {
                fbBalance: 0,
                fbBlockedBalance: 0
            };
            this.$get("member/balance/getBalances", data).then(res => {
                if (res && res.status == "SUCCEED" && res.result) {
                    this.fabiBalance = res.result[0] || obj;
                }
            });
        },
        getUserInfo() {
            this.$get("member/member/getMember", {
                member: this.$store.state.userId
            }).then(res => {
                if (res.status == "FAILED") {
                    this.Toast(res.errorMessage);
                } else if (res.status == "SUCCEED" && res.result) {
                    this.storeState = res.result.storeState;
                    this.nickName = res.result.nickName;
                    this.userInfo = res.result;
                    // if (res.result.cardNo == "") {
                    //     this.isRenzheng = false;
                    // } else {
                    //     this.isRenzheng = true;
                    // }
                }
            });
        },
        //获取otc订单记录
        getOrderList(type) {
            var data = {
                page: this.pageNum,
                size: this.pageSize,
                currency: this.tabList[this.subTabType].currency,
                direction: this.curType == 1 ? "BUY" : this.curType == 2 ? "SELL" : ""
            };
            if (type) {
                this.$util.showLoading();
            }
            this.$post1("otc/order/orderList", data)
                .then(res => {
                    this.Toast.clear();
                    if (res && res.status == "SUCCEED" && res.result) {
                        if (this.pageNum == 1) {
                            this.orderList = res.result.data || [];
                        } else {
                            this.orderList = this.orderList.concat(res.result.data);
                        }
                        if (res.result.data.length < this.pageSize) {
                            this.noMores = true;
                        } else {
                            this.pageNum = this.pageNum + 1;
                            this.noMores = false;
                        }
                        this.mescroll.endSuccess(res.result.data.length, !this.noMores);
                    } else {
                        this.mescroll.endErr();
                    }
                })
                .catch(err => {
                    this.Toast.clear();
                    // this.mescroll.endSuccess(10,false);
                    this.mescroll.endSuccess(10, false);
                });
        },
        //二级tab切换
        switchSubTab(n) {
            if (n == this.subTabType) {
                return;
            }
            this.subTabType = n;
            this.mescroll.resetUpScroll(true);
            this.getOrderList(1);
            this.price = null;
            this.number = null;
        },
        switchPayType(n) {
            if (n == this.payType) {
                return;
            }

            this.payType = n;
        },
        //返回上一页
        back() {
            setTimeout(res => {
                this.orderList = [];
                this.curType = 1;
            }, 300);
            this.focusIndex = 0;
            this.merchantInfo = {};
            this.$router.go(-1);
        },
        //切换
        switchTab(type) {
            if (type == this.curType) {
                return;
            }

            if (type == 3) {
                if (this.userInfo.cardState != "PASS") {
                    this.Dialog.confirm({
                            title: "",
                            message: "注册商户必须完成高级认证，去认证？"
                        })
                        .then(() => {
                            this.$router.push("/personalCenter");
                        })
                        .catch(() => {});
                    return;
                }
                if (
                    this.storeState == "null" ||
                    this.storeState == "REFUSE" ||
                    this.storeState == null
                ) {
                    this.curType = type;
                } else {
                    this.$router.push({
                        path: `/transaction/merchantAudit`
                    });
                }
                return;
            }
            this.curType = type;
            this.price = null;
            this.number = null;
            this.mescroll.resetUpScroll();
            this.pageNum = 1;
            this.orderList = [];
            this.getOrderList(1);
            this.getPrice(); //当前币种价格
        },
        // 打开更多弹框
        openPoups() {
            this.isShowMore = true;
        },
        close1() {
            this.isShowMore = false;
        },

        //划转
        goTransfer() {
            if (!this.$util.isLogin()) {
                return;
            }
            this.$router.push({
                path: `/assets/transfer`
            });
        }
    },

    deactivated() {
        this.number = null; //购买金额
        this.isShowMore = false;
        this.price = null;
        this.number = null;
        // this.setStatusBar("dark");
    }
};
</script>

<style lang="scss">
.payBox {
    .van-tabs__line {
        background-color: #3d77e0;
        height: 2px;
    }

    .van-tab--active {
        color: #3d77e0;
    }

    .submit {
        .van-button__text {
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 16px;
        }
    }

    #inputBox {
        .van-cell:not(:last-child)::after {
            border: none !important;
        }

        .van-cell {
            padding: 0;
        }
    }

    .van-button--info {
        color: #fff;
        background-color: #3d77e0;
        border: 1px solid #3d77e0;
    }
}
</style><style lang="scss" scoped>
@import "@/assets/scss/theme.scss";

.payBox {
    @include base-background();

    .header_custom {
        margin: 0 -15px;

        .left_icon {
            padding-left: 15px;
            height: 46px;
            display: flex;
            align-items: center;
        }

        .right_icon {
            height: 46px;
            display: flex;
            align-items: center;
            right: 0;
        }

        .titleContent {
            padding: 0 40px;
            width: 100%;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;

            .items {
                line-height: 46px;
                position: relative;
                flex: 1;
                display: flex;
                justify-content: center;

                &.cur {
                    color: #3d78e1;

                    .borders {
                        background: #3d78e1;
                    }
                }

                .borders {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translate(-50%);
                    width: 22px;
                    height: 2px;
                    background: transparent;
                }
            }
        }
    }

    .sections {
        margin: 0 -15px;
        padding: 0 15px;
        overflow-y: auto;

        .assetBox {
            height: 40px;
            padding: 0 27px 0 15px;
            box-shadow: 0px 0px 10px 0px rgba(121, 121, 121, 0.1);
            border-radius: 20px;
            margin-top: 20px;
            background: url(../../assets/images/home/rightArrow.png) no-repeat right 14px center;
            background-size: 6px 10px;
        }
    }

    .subTabList {
        display: flex;
        align-items: center;
        margin: 0 -15px;
        padding: 0 15px;
        height: 40px;
    }

    .operationBox {
        .bottoms {
            .leftBox {
                .items {
                    border: 1px solid rgba(153, 153, 153, 0.4);
                    border-radius: 3px;
                    line-height: 22px;
                    min-width: 50px;
                    text-align: center;
                    margin-right: 12px;

                    &.cur {
                        border-color: rgba(148, 176, 226, 0.5);
                        color: #3d78e1;
                    }
                }
            }
        }
    }

    .inputBox {
        margin-top: 10px;

        .inputs {
            height: 35px;
            border: 1px solid rgba(148, 176, 226, 1);
            border-radius: 5px;
            display: flex;
            align-items: center;
            font-size: 12px;
            flex: 1;
            padding: 0 10px;
        }
    }

    .orderTitle {
        margin: 0 -15px;
        padding: 10px 15px;
    }

    .orderList {
        margin: 0 -15px;
    }
}
</style>
